<template>
  <div id="app">
    <div class="load animated" v-bind:class="{bounceInUp:gifshow,bounceOutDown:!gifshow}"><img :src="loadGif" alt=""></div>
    <b class="logo"></b>
    <div class="contianer">
      <header>
        <i></i>
        <span>领奖信息</span>
      </header>
      <ul>
        <!-- <li><label for="1">姓名：</label><input v-model="formData.name" type="text" value="formData.name"></li> -->
        <li>
          <label for="3">奖品名称：</label><input v-model="actName" type="text" value="actName" disabled></li>
        <li>
          <label for="2">手机号：</label><input id="myphone" v-model="mobile" type="number" pattern="[0-9]*" value="mobile" autofocus></li>
        <!-- <li><label for="4">问题描述：</label><input v-model="formData.actQs" type="text" value="formData.actQs"></li> -->
        <li>
          <span class="tips">Tips：信息提交后不可更改哦~</span>
        </li>
        <li>
          <p class="sub" @click.passive="sumbitForm()"></p>
        </li>
      </ul>

      <p></p>
    </div>
  </div>
</template>

<script>
import "@/assets/style/normalize.min.css";
import "@/assets/style/common.min.css";
import "@/assets/style/animate.min.css";
import '@/assets/js/jquery-1.8.2.min.js'
import '@/assets/js/banshare.min.js'
import { checkMobile, preventMove, GetRequest, getServerHost } from '@/assets/js/tool.js'
// import '@/assets/js/openInWeChat.js'

export default {
  name: "App",
  data() {
    return {
      openid: "",
      mobile: "",
      actName: "",
      gifshow: 1,
      disabled: 0,
      giftList: [{ name: '爱奇艺VIP月卡', type: 1 }, { name: '10元信用卡还款券', type: 2 }],
      loadGif: require("./assets/img/load.gif"),
      initUrl: 'rights',
      sendUrl: 'rightsGrant',
    };
  },
  mounted() {
    this.$nextTick(() => {
      preventMove();
      this.initUser();
    });
  },
  methods: {
    //获取用户的信息
    initUser() {
      this.$ajax
        .get(getServerHost() + this.initUrl, {
          params: {
            openid: GetRequest().openid
          }
        }).then(rs => {
          if (!rs.data['res']) {
            alert('当前用户未中奖');
            return;
          }
          if (200 != rs.data.code) {
            alert(rs.data.msg)
            return;
          }
          var res = rs.data.res;
          this.openid = res.openid;
          this.giftList.map((items) => {
            if (items.type == res.type) {
              this.actName = items.name;
            }
          })
          this.mobile = res.mobile;
          if (this.mobile) {
            var myphone = document.getElementById('myphone')
            myphone.setAttribute('disabled', 'disabled');
          }
          this.gifshow = 0;
        })
    },
    // 发送手机号地址
    sumbitForm() {
      var vm = this;
      if (!this.checkPhone()) {
        return;
      }
      this.$ajax
        .get(getServerHost() + this.sendUrl, {
          params: {
            openid: vm.openid,
            mobile: vm.mobile
          }
        })
        .then(rs => {
          console.log(rs.data);
          if (200 != rs.data.code) {
            alert(rs.data.msg);
            return;
          } else {
            alert("反馈成功");
          }
        });
    },
    checkPhone() {
      if (!checkMobile(this.mobile)) {
        alert('请填写正确手机号')
        return false;
      }
      return true;
    }
  }
};
</script>
<style lang="less">
html {
  width: 100%;
  height: 100%;
  font-size: 24px;
}
body {
  margin: 0 auto;
  max-width: 750px; /*no*/
  width: 100%;
  height: 100%;
  .logo {
    position: absolute;
    left: 2%;
    top: 2%;
    width: 138px;
    height: 62px;
    background: url("./assets/img/logo.png") no-repeat 5px 5px;
    background-size: 138px 62px;
    z-index: 999;
  }
}
.load {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  vertical-align: middle;
  text-align: center;
  z-index: 999;
  img {
    display: inline-block;
    vertical-align: middle;
  }
}
.load:before {
  content: "";
  width: 0;
  height: 50%;
  display: inline-block;
}

#app {
  width: 100%;
  height: 100%;
  .contianer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1010px;
    background: url("./assets/img/bg.png") no-repeat center center;
    background-size: 640px auto;
    header {
      margin: 0 auto;
      padding-top: 116px;
      text-align: center;

      margin-bottom: 45px;
      i {
        vertical-align: middle;
        display: inline-block;
        width: 60px;
        height: 60px;
        background: url("./assets/img/q-icon.png") no-repeat;
        background-size: 66px auto;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        vertical-align: middle;
        color: #dfeb9f;
        font-size: 48px;
      }
    }
    ul {
      margin: 0 auto;
      width: 430px;
      height: 490px;
      li {
        width: 100%;
        font-size: 30px;
        letter-spacing: 0.1em;
        text-align: center;
        margin-bottom: 15px;
        label {
          font-size: 28px;
          display: inline-block;
          color: #ffffff;
          width: 40%;
          text-align: right;
        }
        input {
          font-size: 28px;
          width: 60%;
          padding-left: 5px;
          height: 50px;
          background: #283822;
          border-radius: 8px;
          color: #fff;
        }
      }
    }
    .tips {
      font-size: 24px;
      color: #ffd144;
    }
    .sub {
      margin: 22px auto 0;
      width: 227px;
      height: 72px;
      background: url("./assets/img/sub.png") no-repeat;
      background-size: 227px 72px;
    }
  }
}
</style>


